<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2-1-2-Code</title>
	<link href="lib/lib/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<h4>
	<ol>
		<li>form中label必须添加，以此适应bootstrap识别input元素，如不需要添加可加类名:sr-only 隐藏</li>
		<li>在input上加class="form-control"  为添加圆角效果</li>
	</ol>
</h4>
<br>


<h3>内联表单变成自适应宽高</h3>
<div class="container">
	<form role='form' class="form-inline">
		<div class="form-group">
			<label >用户名</label>
			<input type="text" class="form-control" placeholder="userName">
		</div>

			<div class="form-group">
				<label >用户</label>
				<input type="text" class="form-control" placeholder="userName">
		</div>

		<div class="form-group">
				<label >用户名3</label>
				<input type="text" class="form-control" placeholder="userName">
		</div>

		<div class="form-group">
				<label class="sr-only">用户名</label>
				<input type="text" class="form-control" placeholder="userName">
		</div>
	</form>
</div>

<hr>

<h3>水平表单</h3>
	<form class="form-horizontal" role='form'>
		<div class="form-group">
			<label class="col-sm-2 control-label">Emain</label>
			<div class="col-sm-10">
				<input type="emain" placeholder="emain" class="form-control">
			</div>
		</div>
		
		<div class="form-group">
			<label class="col-sm-2 control-label">password</label>
			<div class="col-sm-10">
				<input type="password" placeholder="password" class="form-control">
			</div>
		</div>

		<div class="form-group">
			<div class="col-sm-offset-2  col-sm-10">
				<div class="check">
					<label>
						<input type="checkbox">记住密码
					</label>
				</div>
			</div>
		</div>

		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-10" style="border:1px solid red;">
				<button type="submit" class="btn-lg btn-primary">登录</button>
			</div>
		</div>

	</form>


















<br><br><br><br><br>
<!-- 引入本地文件 bootstrap基于JQ上运行，需加载JQ文件-->
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/lib/js/bootstrap.min.js"></script>
	
</body>
</html>